<template>
    <div class="addsalesman">
        <div class="titel"><h1>销售员负责的客户列表</h1></div>
        <div class="select">
            选择销售人员:
            <el-select
                v-model="value"
                placeholder="请选择"
                @change="getCustomerList1(value)"
            >
                <el-option
                    v-for="item in CustomerListData"
                    :key="item._id"
                    :label="item.salesName"
                    :value="item._id"
                >
                </el-option>
            </el-select>
            <el-table
                :data="CustomerListData1"
                stripe
                style="width: 100%"
                :lazy="true"
            >
                <el-table-column prop="_id" label="客户编号" width="350">
                </el-table-column>
                <el-table-column prop="account" label="账号"> </el-table-column>
                <el-table-column prop="usersPassword" label="密码">
                </el-table-column>
                <el-table-column prop="usersName" label="姓名">
                </el-table-column>
                <el-table-column prop="usersPhone" label="联系方式">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapState } = createNamespacedHelpers("salespersons");
export default {
    data() {
        return {
            value: "",
        };
    },
    mounted() {
        this.getCustomerList();
    },
    computed: {
        ...mapState(["CustomerListData", "CustomerListData1"]),
    },
    methods: {
        ...mapActions(["getCustomerList", "getCustomerList1"]),
    },
};
</script>

<style lang="scss">
.addsalesman {
    .titel {
        line-height: 40px;
        background: rgba(185, 169, 169, 0.911);
        h1 {
            margin-left: 20px;
            color: rgb(255, 255, 255);
        }
    }
    .select {
        margin-top: 20px;
        .el-table {
            margin-top: 20px;
        }
    }
}
</style>